<template>
    <div class="regPage">
        <div class="bar">
            <div class="btn" @click="add"><i class="el-icon-plus" /> 新增</div>
        </div>
        <div class="regList">
            <el-table :data="tableData" border style="width: 95%; margin: 0 auto">
                <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
                <el-table-column label="登记表名称" align="center">
                    <template slot-scope="{ row }">
                        <template v-if="row.editable">
                            <el-input v-model="row.title" />
                        </template>
                        <span v-else>{{ row.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template slot-scope="{ row }">
                        <div v-if="row.editable">
                            <el-button type="text" size="small" @click="cancel(row)">取消</el-button>
                            <el-button type="text" size="small" @click="save(row)">保存</el-button>
                        </div>
                        <div v-else>
                            <el-button v-if="row.print" type="text" size="small" @click="view(row)">查看准考证</el-button>
                            <el-button type="text" size="small" @click="edit(row)">编辑</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :title="title" v-if="dialogVisible" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" :close-on-click-modal="false">
            <enlist :formData="formData"></enlist>
        </el-dialog>
        <el-dialog title="准考证" v-if="dialogPaper" :visible.sync="dialogPaper" width="60%" :close-on-click-modal="false">
                <exame-paper></exame-paper>
        </el-dialog>
    </div>
</template>

<script>
import enlist from '../registerAndEnlist/enlist';
import { saveForm, getBaseInfo, getUserInfo, getInfoList } from '@/api/ewgAndEnlist';
import ExamePaper from './examePaper.vue';
export default {
    components: {
        enlist,
        ExamePaper
    },
    data() {
        return {
            tableData: [
                { title: '登记报名表1', id: '001', editable: false, print:true },
                { title: '登记报名表2', id: '002', editable: false, print:false  }
            ],
            formData: {},
            title: '',
            dialogVisible: false,
            dialogPaper:false
        };
    },
    created(){
        this.getList()
    },
    methods: {
        view(row) {
            // row.editable = false;
            // this.dialogVisible = true;
            console.log(row);
            this.dialogPaper = true
            // this.title = row.title;
        },
        edit(row) {
            // row.editable = true;
            this.title = row.title;
            this.getDetailsInfo(row.id)
                .then(() => {
                    this.dialogVisible = true;
                })
                .catch((err) => {
                    this.$message({
                        message: err,
                        type: 'error'
                    });
                });
        },
        save(row) {
            if (row.title === '') {
                this.$message({
                    message: '请填写登记表名称',
                    type: 'warning'
                });
                return;
            }
            this.getBaseInfo().then(res => {
                saveForm(res).then(r => {
                    console.log('新增返回数据', r);
                })
                row.editable = false;
            }).catch(err => {
                this.$message({
                    message: '保存失败/请求失败',
                    type: 'error'
                });
            }) //获取基础信息
        },
        cancel(row) {
            this.tableData.pop();
            row.editable = false;
        },
        add() {
            this.tableData.push({
                title: '',
                id: '',
                editable: true
            });
        },
        getBaseInfo() {
            return new Promise((resolve, reject) => {
                getBaseInfo().then((res) => {
                    console.log(res, '获取基础信息');
                    res = res.data;
                    this.formData = {
                        title: res.title,
                        zzmm: res.politicalStatus,
                        name: res.name,
                        gender: res.sex,
                        born: res.birthday,
                        mz: res.nation,
                        qrzxl: res.education,
                        qrzxx: res.major,
                        phone: res.phone,
                        jtcy: [
                            {
                                gx: '',
                                name: '',
                                born: '',
                                zzmm: '',
                                gzdw: '',
                                editable: false
                            },
                            {
                                gx: '',
                                name: '',
                                born: '',
                                zzmm: '',
                                gzdw: '',
                                editable: false
                            },
                            {
                                gx: '',
                                name: '',
                                born: '',
                                zzmm: '',
                                gzdw: '',
                                editable: false
                            },
                            {
                                gx: '',
                                name: '',
                                born: '',
                                zzmm: '',
                                gzdw: '',
                                editable: false
                            }
                        ],
                        txdz: res.mailingAddress,
                        headIcon: res.photo,
                        id: res.idCard
                    };
                    resolve(res)
                }).catch(err => {
                    reject(err)
                })
            });
        },
        // 获取详细信息
        getDetailsInfo(id) {
            return new Promise((resolve, reject) => {
                getUserInfo({ id })
                    .then((res) => {
                        console.log(res, '获取报表详细信息');
                        res = res.data;
                        if(!res){
                            reject('没有获取到报表详细信息')
                            return
                        }
                        this.formData = {
                            id: res.id,
                            title: res.title,
                            zzmm: res.politicalStatus,
                            name: res.name,
                            gender: res.sex,
                            born: res.birthday,
                            mz: res.nation,
                            jkzk: res.health,
                            bkdw: res.examfor,
                            gzdw: res.curworkcomp,
                            qrzxl: res.education,
                            qrzxx: res.school || '' + res.major || '',
                            zzxl: res.education2,
                            zzxx: res.school2 || '' + res.major2,
                            zyjszc: res.techTitle,
                            wycd: res.lang,
                            phone: res.phone,
                            gzxxjl: res.experience,
                            jcqk: res.reward,
                            jtcy: res.applyFamilyVos,
                            txdz: res.mailingAddress,
                            brxxzz: res.personAddress,
                            memo: res.note,
                            jg: res.fromplace,
                            headIcon: res.photo,
                            id: res.idCard
                        };
                        resolve();
                    })
                    .catch((err) => {
                        console.log(err);
                        reject(err);
                    });
            });
        },
        handleClose() {
            this.dialogVisible = false;
        },
        getList() {
            getInfoList().then((res) => {
                console.log(res, '列表信息');
                res = res.data;
                if(!res){
                    this.$message.error('没有获取到登记列表数据')
                    return
                }
                this.tableData = res.map((item) => {
                    return Object.assign(item, { editable: false });
                });
            }).catch(err=>{

            })
        }
    }
};
</script>

<style scoped>
.regPage {
    min-height: 38.35vw;
}
.bar {
    width: 95%;
    margin: 0 auto;
    text-align: right;
}
.bar .btn {
    margin: 5px;
    color: #1893fc;
    cursor: pointer;
}
</style>